#gradient tutorial

[peytonsawyers]

This quick tutorial will go over how to make gradients, from simple gradients to multicolor ones.

give this tutorial a like/reblog if it helped you out

end result & tutorial under the cut

if questions should arise, feel free to send a message!

Chapters:

how to make a basic gradient

adding colors with brushes

softening & adjustments

What you´ll need:

any version of photoshop (I use CS6, mine is in german because I bought it years ago in germany) 

very basic photoshop knowledge 

i.  how to make a basic gradient

Open a new document in your desired size. 

There are several ways to make gradients. I always use the new fill layer option, right next to the new layer or new group buttons on the right side.

Click on it and select the second option.

Adjust the angle however you wish, and then click on the gradient to bring up the next window

Select any colors you want by clicking on the little droppers highlighted above. I used #ff27f2 on the left and #d58dfa on the right. Once you´re done click OK until your new gradient is on your document.

ii. add colors with brushes  

add a new layer & select a big brush with no hardness and low opacity.

select any color to paint with, I´ll be using  #e50051 &  #770dfa & plain white. Start painting on that new layer in slow strokes. You can add as many colors as you want. Mine now looks like this:

Now we merge our layers by selecting them, then righ click and selecting merge 

iii. softening & adjustments 

Go to filters -> blur > motion blur 

Depending on the gradient you´ll have to select different variables, but for this one I used the numbers below:

Sometimes I add Gaussian Blur too to blend it even more, but didn´t do that for this gradient. 

Now for the adjustments I only added a brightness and vibrance layer. This is the finished gradient:

[leonw4nter]

I hope you don’t mind me asking but how do you do the gradient colors for your titles they’re so pretty

HELLOOOO!!! No, I don't mind! Here's how I usually format my gradient titles :)

#1 - Go to the settings icon on the post and click on that. Scroll down and look for "Text Editor".

#2 - It should say "Rich Text". Click that and choose "HTML" from the choices.

#3 - Then go to this site and on a field that says "Your text here!", place your title and then set the colors you want for your text using the two things beside the field where you put your title.

#4 - Click "generate" and if you scroll down, you'll see the HTML code for your text. Click that and copy.

#5 - Go to the HTML part of your post and paste the code. Switch back to the preview part and you're free to adjust the gradient text (regular, chat, Lucille) and you're done!

I hope this was easy to understand anon! :))

[zaldrizotl]

GRADIENT TEXT TUTORIAL

HOW TO GET OMBRÉ STYLED TEXT ON TUMBLR

𝜗℘ I got a request on TikTok asking to do a tutorial on gradient text — tumblr doesn’t have an in-app option on doing gradient texts. This is how.

𝜗℘ Sites you can use: image color picker / stuffbydavid (gradient text).

𝜗℘ People say that you have to use a computer for this, which isn’t true. I am able to make gradient text on my phone, but you can use a computer if you want.

color picking from an image is optional, but highly recommended.

one: put the text you want to color for your tumblr post.

two: change the color of the text to whatever color you want. there are several options on how you want it. pick whatever option you want. the text will automatically generate for you.

three: copy the entire code then press “copy”.

four: go over to tumblr (website, not the app) and click “edit post” (the pencil) or create a new post.

five: click the settings button and change it from “rich text” to “HTML.”

six: paste the code from the gradient text website in the HTML where you want it to go. (I paste it then just save the post to my drafts then edit the text on the app)

[what-is-love-babey-dont-hurt-me]

literally how are you doing the gradient text thing. i need to know.

✨ Snappy's Gradient Text Tutorial

You might have seen me use gradient text in a few of my artworks, and it is a great tool to make a posts tand out! I learned from this post, but find some of the information outdated, so I am making a tutorial of my own!

To my knowledge, this is only possible via desktop mode* (mobile method at end), but not the app, as access to the HTML function is necessary. Alongside that, you need access to a text color fader! There's a few options out there, but I use:

Patorjik's Text Color Fader

Let's get to the tutorial!

Have the text you want to turn into a gradient ready and copy it to your clipboard.

2. Open the text color fader and paste your text into the box labeled "your message".

3. For the most basic gradients, you may ignore the boxes on the right. The leftmost boxes allow you to choose between preset colors or making your own colors.

Tip: if you are making a gradient for something such as art, I reccoment grabbing a few hex codes from the image to use for your gradient. This allows you to have control over your colors. You may also save a pallet if you want to use it again

4. When you are happy with your colors, generate your text.

5. You will be brought to this page. If you are happy with the colors, click "select all" and copy the HTML to your clipboard.

TIP: check your text against both a dark and light background to ensure it will be readable to viewers on dark and light mode. If it is not you can tweak the colors by choosing "create new fade".

6. Open Tumblr again and open your post. At the top right there is a grear icon. Click the icon and scroll down to the text editor. Change the setting from "rich text" to "HTML"

7. When you move to HTML, your post will look very different! In the HTML, your goal is to find the text you want to replace in the code.

TIP: If you can't find it, use "Ctrl + F" to open the keword search function and it will highlight your word.

8. Highlight your plain text, right click it, and paste your HTML from Patorjik into the space.

TIP: The HTML is a confusing mess to look at. Click the "preview" tab to check if your code worked

9. You should see a gradient when you swicth modes!

If the HTML broke your formatting, you can edit it in the preview mode. Once you have done a gradient a couple of times this process is very easy and takes LESS than two minutes. It looks intimidating but after you get the hang it is very achievable! I believe in you guys being able to do it. Happy gradient texting for you guys!

*EDIT: It is possible via mobile through the method of entering your account on a web browser and putting it on computer mode, then following the same process. Reportedly it is less comfortable but it works, thank you to chocokeyboard for letting me know!

[maxfwd]

Sketch-to-Final Art Process for "Marin" As demonstrated above, the process had a clear compositional intention from the beginning, with a quick repositioning so that her eye was in the midline of the image because I like that. Then I refined it into a tight construction sketch, then some quick "flat" tones, and then just focused on compositional shading to give the hint of a sunlit back and reflected light presumably coming off the beach sand. Tiny details like the tears and jewel highlights always saved for last. The color is via Gradient Map filter which works really well if you can manage the values right in grayscale first.

[kiwinatorwaffles]

HOW I PAINT WITH GRADIENT MAPS

the post by arcanescribbles where i learned this technique! check out their works!

an even simpler version of this is to just lightly brush colors over a base color in the background and then go off of that. otherwise, i hope this can help!

a full version of my example piece here

[uzmacchiato]

Hi! How you doing the combination in the titles? Can you do a tutorial please! Thanks!

Hello @elvisbdoll 🫶🏻

~ Firstly, I'll share the link from where I learnt to do that. It is explained in a very easy and short way here.

~ You need to use Tumblr web on your phone or laptop for this idk why it doesn't work on the app.

~ I'll also explain below in my own detailed way, hoping that this becomes easy for anyone who follows my posts and wants to know how I do it😁

• Website for the Gradient Text :

TEXT COLOR FADER

• Detailed process of how I use customised gradient text on Tumblr :

( Pay attention to the colors that I have used in the steps as well as the screenshots to understand better. The markings on the photos are to make it easier to spot what I'm talking about. )

.

1. Create a post on Tumblr by writing the text you want to make a gradient of and save it as a draft. In the draft → Go to the Settings wheel and in the Text Editor section select HTML which is required by Tumblr to read a coded* text.

* ( The colors of the Gradient text are basically coded into text on the Website I shared above. Hence, changing into the HTML type here will help Tumblr recognise that coded text and turn it into a normal Gradient colored text. )

2. You will see a coded version of the text you wrote which is encoded between <h1>...your text...</h1> for my text in the photo below. You can toggle between HTML & Preview to see the coded and uncoded(normal) version of the text. Copy the normal version of the text from the Preview mode that you want to turn into gradient.

3. Visit the Website in the link I've shared above.

.

A: is the part where you paste the text you just copied and want to change into a Gradient.

B: is the number of colors you want to use in the gradient.

C: is the part where you put the color codes (HEX/RGB) or just swipe to get the desired color from the color wheel.

4. I pasted the text in the text box and made the changes that I need to do to get the gradient I want in the next part. I used 4 colors and put the Hex codes for the Teal and Beige colors. Once you're done click on "Generate Color Coded Text"

5. On the next page you'll get to see a preview of the text and the coded text in the box below. Click on Select All and Copy the coded text.

If you want to make any changes you can go back by clicking on "Create a new fade" and you will be taken back to edit the current gradient.

6. Go to the draft and delete the existing text to avoid mixing the coded text with it. Stay on the HTML mode rather than Preview mode.

Paste the coded text while you're on the HTML mode of the draft (the codes are really long depending on the number of colors and length of the text)

After pasting in HTML mode click on Preview and you're DONE.

Other than that you can edit the text style after pasting here into the basic styles provided by Tumblr — bold, italic, Chat, Intended, etc.

Final Result : How to make Gradient Text on Tumblr ?

I hope this was helpful😭 I love editing the text and making it match my dividers, so this is magic for me. You can DM me if you need any more help understanding this.

Thank You❤️

[novy2sirius]

GRADIENT TEXT TUT

how to get ombré colored text on tumblr <3

꧞ i get a lot of dms and comments asking about how to change the color of your text to colors that tumblr doesn’t have or to an ombré text. this is how

꧞ sites you can use: the one i use // two // three

꧞ you can use your phone for this, but i prefer using the computer. just go to safari to do it instead of the app if you wanna do it on the phone

one: copy the text you want to color from your tumblr post then paste it into the websites text box

two: change the color of the text to whatever color you want. with the website i use it allows you to pick presets or you can also customize your own then click generate

three: click the “select all” button and copy the code

four: go over to tumblr and click the edit button on your post

five: click the settings button and change the text editor to "html" then find the html section at the top and click on it

six: paste the code from the color fader website in the html where you want it to go (i paste it at the top and just edit it on my phone by holding text down and moving it)

[ominous-faechild]

Hey how do you do the color gradient thing for your dialog tags?

Assuming you mean these things, I've actually been meaning to make a guide of my own for a while lol.

For one, you can only do this on computer/the website of Tumblr! There's no option to select this stuff on the app.

STEP 1: CREATE A NEW DOC / GO TO SETTINGS

It opens a dropdown menu/whole screen full of options!

From there, select the "text editor" dropdown, which starts as displaying "rich text".

Select "HTML"

And it should change how the entire post looks!

STEP TWO: CHEAT

Yeeeeeaaaaah, so I use a website for this lol

I inserted my colors for faeries (#30853C) and Cloud (#6DC1B4) for my example of "these things" earlier. To make this easier, I most often have two windows open at a time while working on uploading my scripts to Tumblr.

To get colours to insert into the Text Colorizer website, you can use any kind of hex color picker or even this one website I've used to yoink "thematic" colors from photos!

Personally, I've developed a massive library of colors over time for this exact purpose lol. Using my old colors as a "base", I can change it accordingly to the kind of "new color" that I want for a specific character or thing!

(I'll use the website to also make gradients for "in-between" colors lol)

STEP 3: INSERT TEXT / DESIRED COLORS

To make Nova's gradient, I start with #A600D9, my color for Magic, and end with #F56745—their individual color. However, being as it's short, I'll use a quote from them instead lol.

Once you've inserted your text and colors, you will click in the text box I highlighted in red, ctrl+a and ctrl+c to copy it all, and go back over to your new tumblr post tab!

From there, you'll ctrl+v to paste the entirety into the HTML area, which pastes the code into your post!

AND VOILA!

You have gorgeous gradient text!

However, I want to give a fair warning and a bit of advice! If you didn't notice wayyyyyyy back when...

Tumblr warns that this all can break your formatting!

It doesn't do it too often, but take it from someone who does an obscene amount of formatting... it's 100% true.

STEP 4: CHEAT SOME MORE!

For this reason, I personally have a whole separate draft post full of my characters' colors (and names lol) that I use to copy-paste them in from rather than using the "html" text editor on every post!

I mentioned earlier I often have multiple windows open while editing? Here's what that looks like!

Additionally, I'll use a separate tab off on the left (my "current wip post" side) with the "html editor" enabled for me to copy-paste stuff!

(Also here's yet another example of how many colors I have)

Once again, you can ctrl+c these things to paste them into another tumblr post with the correct colors!

And it's ONLY possible to do on the website!!!

EXTRA INFO!

WARNING:

Tumblr will only allow each "paragraph's html to be so many characters long, so you can't have too big of anything in a gradient!

And by "anything"... I mean you really can't have that big of a gradient in general. RIP lol.

It straight-up won't save the post so long as you have that "overflow" in the character block! MAKE SURE YOU'VE FIXED IT, OR YOU CAN AND WILL LOSE ALL PROGRESS ON YOUR POST!

SINGLE-COLOR TIP:

You don't need the website for a single color! If you'd like, you can just change the "color code" within the html editor to change specific colors!

MAKE SURE COLORS CAN WORK ON DIFFERENT BACKGROUNDS!

On desktop, you can use shift+p while not on any sort of textbox to change the color pallet! I always do tests to see which colors work best before settling on any!

(Tho, the blue background SPECIFICALLY is nightmarish to work around. So if that's the ONLY thing I can't make work, I often ignore it and let you guys who use it suffer lmao)

(Hopefully this'll give you guys some respect for me and how much I do to make my posts aesthetic af lol)

Also hopefully this all helps???

divider by @cafekitsune

[fear-is-truth]

COLOUR TEXT TUTORIAL ⋆౨ৎ˚⟡˖ ࣪

go to this site ➤ follow the instructions & copy the code from the bottom box (the HTML one) ➤ open tumblr on a desktop browser ➤ create new post ➤ click the gear icon in the top-right corner to access settings ➤ scroll down and find the “text editor” option; switch it to “HTML.” ➤ paste the HTML code into the post editor ➤ scroll back up and switch between “HTML” and “preview” modes to edit the code and see how your post looks ➤ save draft :)

step-by-step pictures under cut :

final result : I am punished by love

[astrolavas]

Random question, but how did you do the rainbow thing in your pinned post? Is it from something you buy on Tumblr?

the gradient, yes!!! no, it's completely free.

so, i don't remember where exactly i got the instructions as to how to do it, but this is basically how the word "welcome" from my pinned looks like in html:

since it's a gradient, every letter is a sliiightly different hue, but i remember there was a website where you could basically write any word/sentence that you'd like gradiented, choose the starting and ending colors, and it'd automatically give you the html code for the gradiented text. i think it was this one?

and that's what you get!

you just gotta copy the code, start editing your post, make it so you're editing it as html, paste the code in, and it SHOULD work. hopefully!

[kaiserouo]

(prev)

i colored that

[knifelace]

　 KNiFELACE 　────　 a(n edit) resource blog run by @chocospresso .

𓊆　 my neospring .　 if you wish for me to delete a post / reblog , let me know .

[maxfwd]

Rough Sketch to Final process GIF of Princess Zelda from the Animated Series! Those who are curious (or dubious) of my process will be delighted to see the full 3-hour livestream VOD, from blank page to final color, is available here: https://www.youtube.com/watch?v=rjzcpfPxm8g Start with a solid sketch, follow the process, and you can push the values to 11... then a gradient map to add a color finish ! If you like this style, I really encourage you to share and check out my other Zelda portraits on my profile. I've been under lock and key in the entertainment industry for a long time. Now that things are slow, I'm hoping to transition to more of an educational role and help popularize some proven effective illustration techniques to make sure the next generation of digital artists have all the tools they need to survive in these unprecedented times... I'll keep trying to be as transparent as possible and learn as i follow this new path wherever leads.

[simp4jungwonn]

TUTORIAL: how to make gradient text for your post

I hope this helps and I hope that i didn’t explain it horribly @sylvialentina

[gradifizz]

custom colors tutorial

begin

1. ok create a Tumblr post

2. go to settings

3. change Text Editor to Markdown

it might also work set to HTML but I haven't tried it

4. decide your message. time to play with markdown html stuffs!

gradients (easy way)

1. go here: https://patorjk.com/text-color-fader/. (it lets you do multiple colors. imo this is the best working tool. but you can totally look up text gradient makers for forums/email, or make ur own if u want)

2. find the options u want :)

3. you might have to replace o with o and O with O or they may disappear. dunno why

4. make sure u keep the Output Code: HTML (span tags) option the same

5. press generate! copy the text from the second text box, with the funky text with a lot of <span>

6. paste into the post editor

7. repeat as desired :)

solid colors (hard ish way)

1. paste this into the post editor:

<span style="color: ">message here</span>

2. if you know the hex codes of the colors you want, skip to end

3. look up "color picker". change the color until it's how u want

4. copy the hex code (it should look like # followed by numbers or letters). if I want this cool shade of blue, it looks like this: #22405e

5. paste the hex code into the text you already have like so

<span style="color: #22405e">message here</span>

6. repeat as desired :)

end

now u can switch to the preview tab or back to the text editor, and keep making ur post! don't switch back and forth, or you'll lose the color and have to do it again

yes you can make the colored text bold and stuff

yay colors

hey guys

i found out how to do colors